<template >
<button 
:class="`my-button btn-${type}`"
>
<slot></slot>
</button>
</template>
<script setup>
const props = defineProps({ 
type:{
    type:String,
    default:'Button'
  
}

});
</script>
<style lang="scss" scoped>
.my-button {
    height: 33px;
    border-radius: 3px;
    border: 1px solid #ccc;
    padding: 0px 15px;
    cursor: pointer;

    &.btn-primary {
        background-color: #007bff;
        border-color: #007bff;
        color: #fff;
    }
    &.btn-default {
        background-color: #f8f9fa;
        border-color: #f8f9fa;
        color: #212529;
    }
    &.btn-danger {
        background-color: #dc3545;
        border-color: #dc3545;
        color: #fff;
    }

}
</style>